<template>
  <div class="navbar">
    <div class="n_back">
      <div class="back_icon" v-if="rback" @click="$router.back(-1)"></div>
    </div>
    <div class="n_title">{{wtitle}}</div>
    <!-- n_right用于小标题跳转 -->
    <div class="n_right">
      <span v-if="wtitle=='收货地址'" @click="goto('添加')">添加</span>
      <span v-if="wtitle=='选择收货地址'" @click="goto('添加')">添加</span>
      <span v-if="wtitle=='添加收货地址'" @click="e_saveAddress">保存</span>
      <span v-if="wtitle=='购物车'" @click="_sendFatherEdit">{{edit}}</span>
    </div>
  </div>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'

  export default {
    name: 'navbar',
    props: {
      edit: {
        type: String,
        default: ''
      }
    },
    data() {
      return {}
    },

    components: {},

    computed: {
      ...mapState(['wtitle', 'rback']),
    },

    methods: {
      ...mapMutations(['WTITLE', 'RBACK']),
      // 页面跳转
      goto(v) {
        this.WTITLE(v)
        if (v == '添加') {
          this.$router.push('/addAddress')
        }
      },
      // 保存收货地址
      e_saveAddress() {
        this.$emit('saveAddress', '')
      },
      //购物车编辑
      _sendFatherEdit(){
        this.$emit('edit')
      }
    },

    mounted() {
    },
  }
</script>
<style scoped>
  .n_right {
    color: #fff;
  }
</style>
